<template>
  <!-- 规则验证页面 -->
  <div>
    <el-row class="ruleScene container">
      <el-col style="margin-right:10px;" class="content-left">
        <!-- 操作区域 -->
        <upper-template
          @search="searchForm.page=1,searchFunc()"
          @clear="
            (searchForm.sceneCode = ''),
            (searchForm.diff = ''),
            (searchForm.asOfDate = ''),
            (searchForm.ruleCode = ''),
            (searchForm.ruleName = '')
          "
        >
          <!-- 搜索区 -->
          <template slot="searchArea">
            <el-form
              :model="searchForm"
              ref="searchForm"
              label-width="87px"
              label-position="left"
              size="mini"
            >
              <el-form-item label="规则编码：">
                <el-input
                  v-model="searchForm.ruleCode"
                  style="width:180px"
                ></el-input>
              </el-form-item>
              <el-form-item label="规则名称：">
                <el-input
                  v-model="searchForm.ruleName"
                  style="width:180px"
                ></el-input>
              </el-form-item>
              <el-form-item label="业务时间：">
                <el-date-picker
                  v-model="searchForm.asOfDate"
                  value-format="yyyy-MM-dd"
                  type="date"
                  style="width:180px"
                ></el-date-picker>
              </el-form-item>
              <el-form-item label="所属场景">
                <el-select v-model="searchForm.sceneCode" style="width:180px">
                  <el-option
                    v-for="item in ruleSceneList"
                    :key="item.sceneCode"
                    :value="item.sceneCode"
                    :label="item.sceneName"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="差额大于：">
                <el-input
                  v-model="searchForm.diff"
                  style="width:180px"
                ></el-input>
              </el-form-item>
            </el-form>
          </template>
          <!-- 显示隐藏区 -->
          <template slot="columnHide">
            <el-checkbox-group v-model="checkList">
              <el-checkbox
                v-for="item in textData"
                :label="item.label"
                :key="item.prop"
                >{{ item.label }}
              </el-checkbox>
            </el-checkbox-group>
          </template>
        </upper-template>

        <el-table
          ref="multipleTable"
          :data="tableData"
          style="width: 100%"
          @row-click="authorizeFor"
        >
          <el-table-column
            width="55"
            type="selection"
            
          ></el-table-column>
          <el-table-column prop="batchId" label="批次号"  show-overflow-tooltip v-if="columnState[0]">
          </el-table-column>
          <el-table-column
            prop="ruleCode"
            label="规则编码 "
             show-overflow-tooltip
            v-if="columnState[1]"
          >
          </el-table-column>

          <el-table-column
            prop="ruleName"
            label="规则名称 "
             show-overflow-tooltip
            v-if="columnState[2]"
          >
          </el-table-column>

          <el-table-column
            prop="driverName"
            label="分摊动因 "
             show-overflow-tooltip
            v-if="columnState[3]"
          >
          </el-table-column>
          <el-table-column
            prop="sceneName"
            label="所属场景 "
             show-overflow-tooltip
            v-if="columnState[4]"
          >
          </el-table-column>
          <el-table-column
            prop="asOfDate"
            label="业务日期 "
             show-overflow-tooltip
            v-if="columnState[5]"
          >
            <template slot-scope="scope">
              <div v-if="scope.row.asOfDate">
                {{ timeFormats(scope.row.asOfDate) }}
              </div>
              <div v-else>-</div>
            </template>
          </el-table-column>
          <el-table-column
            prop="runResult"
            label="状态"
             show-overflow-tooltip
            sortable
            v-if="columnState[6]"
            :formatter="row => (row.runResult == 1 ? '运行成功' : '运行失败')"
          >
          </el-table-column>
          <el-table-column
            prop="beginTime"
            label="开始时间"
             show-overflow-tooltip
            sortable
            v-if="columnState[7]"
          >
            <template slot-scope="scope">
              <div v-if="scope.row.beginTime">
                {{ timeFormat(scope.row.beginTime) }}
              </div>
              <div v-else>-</div>
            </template>
          </el-table-column>
          <el-table-column
            prop="endTime"
            label="结束时间"
             show-overflow-tooltip
            sortable
            v-if="columnState[8]"
          >
            <template slot-scope="scope">
              <div v-if="scope.row.endTime">
                {{ timeFormat(scope.row.endTime) }}
              </div>
              <div v-else>-</div>
            </template>
          </el-table-column>
          <el-table-column
            prop="inAmount"
            label="分摊前费用"
             show-overflow-tooltip
            sortable
            v-if="columnState[9]"
          >
          </el-table-column>
          <el-table-column
            prop="outAmount"
            label="分摊后费用"
             show-overflow-tooltip
            sortable
            v-if="columnState[10]"
          >
          </el-table-column>
          <el-table-column
            prop="diff"
            label="差额"
             show-overflow-tooltip
            sortable
            v-if="columnState[11]"
          >
          </el-table-column>
        </el-table>
        <pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="searchForm.page"
          :page-size="searchForm.size"
          @refresh="searchFunc"
          :total="total"
        ></pagination>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { ruleResult } from "@/api/index";
import onlyOneSearch from "@/components/onlyOneSearch";
import memberAndTree from "@/components/ca/memberAndTree";
import moment from "moment";
export default {
  data() {
    return {
      // 列隐藏依据数据
      textData: [
        { prop: "batchId", label: "批次号", disabled: true },
        { prop: "ruleCode", label: "规则编码", disabled: true },
        { prop: "ruleName", label: "规则名称", disabled: true },
        { prop: "driverName", label: "分摊动因", disabled: true },
        { prop: "sceneName", label: "所属场景", disabled: true },
        { prop: "asOfDate", label: "业务时间", disabled: true },
        { prop: "runResult", label: "状态", disabled: true },
        { prop: "beginTime", label: "开始时间", disabled: true },
        { prop: "endTime", label: "结束时间", disabled: true },
        { prop: "inAmount", label: "分摊前费用", disabled: true },
        { prop: "outAmount", label: "分摊后费用", disabled: true },
        { prop: "diff", label: "差额", disabled: true }
      ],
      // 显示的列
      checkList: [],
      //查询时默认条件
      searchForm: {
        page: 1,
        size: 15,
        sceneCode: "",
        diff: "",
        asOfDate: "",
        ruleName: "",
        ruleCode: ""
      },
      //场景列表
      ruleSceneList: [],
      total: 0,
      tableData: []
    };
  },
  components: {
    onlyOneSearch,
    memberAndTree
  },
  created() {
    this.checkListInit();
    //获取场景列表数据
    this.getRuleSceneList();
  },
  computed: {
    columnState() {
      let arr = [],
        arr1 = this.textData,
        arr2 = this.checkList;
      for (let i = 0; i < arr1.length; i++) {
        let flg = false;
        for (let j = 0; j < arr2.length; j++) {
          if (arr1[i].label === arr2[j]) {
            flg = true;
          }
        }
        arr.push(flg);
      }
      return arr;
    }
  },
  mounted() {
    this.searchFunc();
  },
  watch: {},
  methods: {
    checkListInit() {
      this.checkList = this.textData.map(v => {
        return v.label;
      });
    },
    getRuleSceneList() {
      ruleResult.queryRuleSceneList().then(res => {
        if (res.code === 200) {
          this.ruleSceneList = res.datas;
        }
      });
    },
    searchFunc() {
      let data = this.searchForm;
      ruleResult.queryVaPage(data).then(res => {
        if (res.code === 200) {
          this.tableData = res.datas.rows;
          this.total = res.datas.total;
        }
      });
    },
    formatSceneType(row, column) {
      if (row.sceneType == 1) {
        return "直接生成到源表";
      } else if (row.sceneType == 2) {
        return "生成到新表：行模式";
      } else if (row.sceneType == 3) {
        return "生成到新表：列模式";
      } else {
        return "";
      }
    },
    formatRunStatus(row, column) {
      if (row.runStatus == 0) {
        return "场景未运行";
      } else if (row.runStatus == 1) {
        return "场景正在运行中";
      } else if (row.runStatus == 2) {
        return "场景运行结束";
      } else if (row.runStatus == 3) {
        return "场景运行停止";
      } else if (row.runStatus == 4) {
        return "场景正在预处理";
      } else if (row.runStatus == 5) {
        return "";
      } else if (row.runStatus == 6) {
        return "场景运行出错";
      } else {
        return "";
      }
    },
    //   点击行选中
    authorizeFor(row) {
      if (this.$refs.multipleTable) {
        this.$refs.multipleTable.clearSelection();
      }
      this.$refs.multipleTable.toggleRowSelection(row, true);
    },
    timeFormat(val) {
      if (val) return moment(val).format("YYYY-MM-DD HH:mm:ss");
      else return "";
    },
    timeFormats(val) {
      if (val) return moment(val).format("YYYY-MM-DD");
      else return "";
    },

    handleSizeChange(val) {
      this.searchForm.size = val;
      console.log(val, "每页数");
      this.searchFunc();
    },
    handleCurrentChange(val) {
      this.searchForm.page = val;
      console.log(val, "当前页");
      this.searchFunc();
    }
  }
};
</script>

<style lang="scss" scoped>
.dialogSearchBox {
  header {
    text-align: center;
    span {
      margin: 0 20px;
    }
  }
}
.treeBoxBig {
  width: 180px;
  height: 32px;
  border: 1px solid #ababab;
  border-radius: 4px;
  .treeBox {
    width: 140px;
    height: 32px;
    padding-left: 10px;
    line-height: 32px;
  }
  .treeBtnCS {
    background: url("~@/assets/images/popWindow_arrow.gif");
    background-repeat: no-repeat;
    height: 32px;
    width: 32px;
    position: absolute;
    left: 156px;
    top: 8px;
    cursor: pointer;
  }
}
</style>